<template>
    <div class="account mt-list">

        <div class="mt-list-filter">
            <el-form ref="form" :model="filter" label-width="80px">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="账号名称">
                            <mt-input v-model="filter.name" :width="inputWidth"></mt-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="公司名称">
                            <mt-input v-model="filter.companyName" :width="inputWidth"></mt-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="手机号">
                            <mt-input v-model="filter.phone" :width="inputWidth"></mt-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="邮箱">
                            <mt-input v-model="filter.email" :width="inputWidth"></mt-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="账号角色">
                            <mt-select
                                v-model="filter.roleId"
                                :options="roleList"
                                labelKey="name"
                                valueKey="roleId"
                                :width="inputWidth">
                            </mt-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="18">
                        <div class="mt-list-filter-btn">
                            <mt-button @click="addBtn">新建</mt-button>
                            <mt-button @click="readList">搜索</mt-button>
                            <mt-button type="submain" @click="resetSearch">重置</mt-button>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
        </div>

        <el-table
            :data="list"
            height="auto"
            class="mt-list-table table">
            <el-table-column prop="id" label="账号id" min-width="300"></el-table-column>
            <el-table-column prop="username" label="账号名称" min-width="180"></el-table-column>
            <el-table-column prop="phone" label="手机号" min-width="180"></el-table-column>
            <el-table-column prop="roleName" label="所属角色" min-width="180"></el-table-column>
            <el-table-column prop="companyName" label="公司名称" min-width="180"></el-table-column>
            <el-table-column prop="country" label="国家" min-width="120"></el-table-column>
            <el-table-column prop="status" label="账号状态" min-width="120"></el-table-column>
            <el-table-column prop="updatedAt" label="最后更新" min-width="220"></el-table-column>
            <el-table-column prop="createdAt" label="创建时间" min-width="220"></el-table-column>
            <el-table-column fixed="right" label="操作" width="180">
                <template v-slot="scope">
                    <mt-button type="table" @click="goEdit(scope.row)">编辑</mt-button>
                    <mt-button type="table" @click="goChange(scope.row)">修改密码</mt-button>
                    <mt-button type="table" @click="goDelete(scope.row)">删除</mt-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="mt-list-footer">
            <div class="totaldata">共{{ total }}条</div>
            <div class="page">
                <el-pagination
                    style="float: right"
                    :current-page="page"
                    :page-size="pageSize"
                    :page-sizes="pageSizes"
                    :total="total"
                    background
                    :layout="pageLayout"
                    class="mt-page"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </div>

        <account-dialog
            ref="accountDialog"
            :roleList="roleList"
            @update="readList">
        </account-dialog>

        <el-dialog
            title="修改密码"
            :visible.sync="dialogVisible"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :show-close="false"
            width="30%">
            <el-form
                ref="form"
                :model="form"
                label-width="80px">
                <el-form-item label="旧密码">
                    <mt-input v-model="form.oldPassword" placeholder="请输入旧密码" :width="inputWidth"></mt-input>
                </el-form-item>
                <el-form-item label="新密码">
                    <mt-input
                        v-model="form.newPassword"
                        placeholder="请输入新密码"
                        :width="inputWidth">
                    </mt-input>
                </el-form-item>
                <el-form-item label="二次确认">
                    <mt-input
                        v-model="form.confirmPassword"
                        placeholder="请二次确认新密码"
                        :width="inputWidth">
                    </mt-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <mt-button :disabled="passwordDisabled" @click="handleSubmitBtn">确定</mt-button>
                <mt-button type="submain" @click="handleClose">取消</mt-button>
            </span>
        </el-dialog>

  </div>
</template>

<script>
import AccountDialog from "./dialog.vue";
import { listMixin } from "@/mixins/list-mixins";
import { resetObject } from "@/utils/index.js";
export default {
    name: "AccountList",

    components: { AccountDialog },

    data () {
        return {
            filter: {
                name: "",
                companyName: "",
                phone: "",
                email: ""
            },

            form: {
                id: "",
                oldPassword: "",
                newPassword: "",
                confirmPassword: ""
            },
            dialogVisible: false,
            inputWidth: "calc(100% - 1rem)"
        };
    },

    computed: {
        passwordDisabled () {
            if (!this.form.oldPassword) return true;
            else if (!this.form.newPassword) return true;
            else if (!this.form.confirmPassword) return true;
            return false;
        },
        roleList () {
            return this.$store.getters["commonList/GET_ROLELIST"];
        }
    },

    mixins: [ listMixin ],

    created () {
        this.readList();
        if (!this.roleList.length) this.$store.dispatch("commonList/getRoleList");
    },

    mounted () {},

    methods: {
        /* 获取列表 */
        async readList () {
            const params = this._.clone(this.filter);
            params.page = this.page;
            params.pageSize = this.pageSize;
            this.$request.post(this.API.GET_ACCOUNT_LIST, params).then(res => {
                console.log("accountList:", res);
                this.list = res.data.data;
                this.total = res.data.total;
            });
        },

        /* 新建按钮 */
        addBtn () {
            this.$refs.accountDialog.open("add");
        },
        /* 编辑按钮 */
        goEdit (item) {
            this.$refs.accountDialog.open("edit", item);
        },
        /* 删除按钮 */
        goDelete (item) {
            this.$confirm("是否删除该账号？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                this.deleteAccount(item);
            }).catch(() => {});
        },
        /* 删除账号 */
        async deleteAccount (item) {
            const params = { id: item.id };
            this.$request.post(this.API.DELETE_ACCOUNT, params).then(res => {
                if (res.success) {
                    this.$mtMessage.success("删除成功！");
                    this.readList();
                }
            });
        },

        /* 修改密码 */
        goChange (item) {
            this.form.id = item.id;
            this.dialogVisible = true;
        },
        handleSubmitBtn () {
            if (this.form.newPassword !== this.form.confirmPassword) {
                this.$mtMessage.error("二次确认密码不同！");
                return;
            }
            const params = this.form;
            this.$request.post(this.API.UPDATE_PASSWORD, params).then(res => {
                console.log("change Password:", res);
                if (res.success) {
                    this.$mtMessage.success("修改成功！");
                    this.handleClose();
                }
            });
        },
        handleClose () {
            resetObject(this.form);
            this.$refs.form.resetFields();
            this.dialogVisible = false;
        }
    }
}
</script>

<style lang="scss">
@import "~@/styles/mt-list.scss";
</style>